<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>数字键盘</title>

    <!-- jQuery Include -->
    <script src="//cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>
    
    
    <!-- Mobiscroll JS and CSS Includes -->
    <link href="css/mobiscroll.custom-2.17.0.min.css" rel="stylesheet" type="text/css" />
    <script src="js/mobiscroll.custom-2.17.0.min.js" type="text/javascript"></script>

    <style type="text/css">
        /* Demo Page styling, you can ignore this in your implementation */
        body { padding: 0; margin: 0; font-size: 16px; font-family: arial, verdana, sans-serif; }
        input, select { width: 100%; padding: .625em; margin: 0 0 .625em 0; border: 1px solid #aaa; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
        .header { padding: .625em; background: #5185a8;}
        .header h1 { margin: 0; padding: 0; color: #fff; text-align: center; font-size: 1.25em; font-weight: bold; text-shadow: 1px 1px 1px #000; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
        .content { padding: 1em; }

        /* Listview demo styling */
        .mbsc-lv-cont { margin: 1em -1em; }
        .item{
            border-bottom:3px solid #ccc;
        }
    </style>


</head>

<body>
    <h3>小数</h3>
    <input type="text" id="number1">
    <h3>货币</h3>
    <input type="text" id="number2">
    <h3>整数</h3>
    <input type="text" id="number3">
    <h3>xxhxxm键盘</h3>
    <input type="text" id="number4">
    <h3>time键盘</h3>
    <input type="text" id="number5">
    <h3>date键盘</h3>
    <input type="text" id="number6">
    <script>
        $(function () {
            $("#number1").mobiscroll().numpad({
                theme:'mobiscroll',
                lang:'zh',
                display:'bottom',
                preset:'decimal', //键盘类型
            })
            $("#number2").mobiscroll().numpad({
                theme: 'mobiscroll',
                preset: 'decimal',
                lang: 'zh',
                anchor: '.md-price',
                min: 10,
                max: 500,
                prefix: '$',
                onSet: function (event, inst) {
                    stepperPrice.mobiscroll('setVal', event.valueText);
                }
            });
            $('#number3').mobiscroll().numpad({
                theme:'mobiscroll',
                lang:'zh',
                display:'bottom',
                preset:'decimal',
                scale:0,
                max:100
            });
            $('#number4').mobiscroll().numpad({
                theme:'mobiscroll',
                lang:'zh',
                display:'bottom',
                preset:'timespan'
            });
            $('#number5').mobiscroll().numpad({
                theme:'mobiscroll',
                lang:'zh',
                display:'bottom',
                preset:'time'
//                timeFormat:'HH:ii A'   //显示为12:00上午
            });
            $('#number6').mobiscroll().numpad({
                theme:'mobiscroll',
                lang:'zh',
                display:'bottom',
                preset:'date',
                headerText:'日期格式为yyyy/mm/dd'
//                timeFormat:'HH:ii A'   //显示为12:00上午
            });
        })
    </script>
</body>
</html>
